import React from 'react';


var SelectList = React.createClass({
    getInitialState: function () {
        return ({
            value: this.props.defaultValue,
            options: this.props.options
        })
    },
    componentWillReceiveProps: function (newprops) {
        this.setState({
            value: newprops.defaultValue,
            options: newprops.options
        }, function () {
            this.render()
        });
    },
    //look here123
    handleChange: function(event) {
        this.setState({value: event.target.value},function(){
            if(typeof this.props.onChange == "function"){
                this.props.onChange();
            }
        });

    },
    getValue:function(){
        return this.state.value;
    },
    getOutValue:function(){
        var that = this;
        for(var data in that.state.options){
            if(data.key == that.state.value){
                return data.value;
            }
        }
        //that.state.options.map(function(item){
        //   if(item.key == that.state.value){
        //
        //   }
        //});
    },

    _renderSelectList:function(){
        var that = this;
        var options = [];
        this.state.options.map(function(item){
            //if(item.key == that.state.value){
            //    options.push(
            //        <option value={item.key} selected key={item.key}>{item.value}</option>
            //    );
            //}
            options.push(
                <option value={item.key} key={item.key}>{item.value}</option>
            );

        });
        return options;
    },
    render:function(){
        return(
            <div className="FormComponent">
                <span className="form_control_name" >{this.props.title}</span>
                <div  className="form_control">
                    <select value={this.state.value || null} style={{width:"100%",height:"40px","border": "2px solid #f2f2f2",paddingLeft:"10px"}} onChange={this.handleChange}>
                        {this._renderSelectList()}
                    </select>
                </div>

            </div>
        )
    }
})

module.exports = SelectList;